﻿@{
    ViewBag.Title = "Index";
    Layout = "../Shared/_Layout.cshtml";
}
<head>
    @*<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>*@
    <script src="../../Contents/Scripts/jquery.autocomplete.js" type="text/javascript"></script>
</head>


<div class="hentry">
    <div class="post-title">
        <a>Tìm kiếm chuyến bay</a>
    </div>
    <div class="search-box">
        
        <table>
            <tbody>
                <tr>
                    <td><input type="radio" id="1way" checked="checked" /><span>Một chiều</span></td>
                    <td><input type="radio" id="2way"><span>Khứ hồi</span></input></td>
                </tr>
                <tr>
                    <td><b>Điểm đi:</b><i>Thành phố hoặc tên sân bay</i></td>
                    <td><b>Điểm đến:</b><i>Thành phố hoặc tên sân bay</i></td>
                </tr>
                <tr>
                    <td>
                        <input type="text" id="placestart"/>
                        <p class="error-msg" id="err-msg-placestart">* Bạn chưa chọn nơi đi</p>
                    </td>

                    <td>
                        <input type="text" id="placeend"/>
                        <p class="error-msg" id="err-msg-placeend">* Bạn chưa chọn nơi đến</p>
                    </td>
                </tr>
            </tbody>
        </table>

        <table style="width: 69% !important; margin-top: -15px; float: left;">
            <tbody>
                <tr>
                    <td>Ngày đi</td>
                    <td>Ngày đến</td>
                </tr>
                <tr>
                    <td>
                        <input type="text" id="datestart" style="width: 45% !important; float: left;"/>
                        <input type="text" id="timestart" style="width: 45% !important; float: left;"/>
                    </td>
                    <td>
                        <input type="text" id="dateend" style="width: 45% !important; float: left;"/>
                        <input type="text" id="timeend" style="width: 45% !important; float: left;"/>
                    </td>
                </tr>
            </tbody>
        </table>
        
        <table style="width: 29% !important; margin-top: 10px; float: left;">
            <tbody>
                <tr>
                    <td><input type="checkbox" checked="checked"/><span>Tìm giá rẻ nhất</span></td>
                </tr>
            </tbody>
        </table>
    
        <div class="search-button">
            <input type="submit" onclick="Search()" value="Tìm kiếm chuyến bay"/>
        </div>
    </div>
    
    <div class="search-result">
        <div id="loadingImage">
            <img src="../../Contents/Images/loading.gif" />
        </div>
        <div id="result">
           @* @{Html.RenderPartial("Partials/_SearchResultPartial");}*@
        </div>
    </div>

</div>

<script>
    $("#1way").click(function() {
        //alert($(this).attr('checked'));
        //if ($(this).attr('checked') == 'checked') return;
        
        $(this).attr('checked','checked');
        $('#2way').removeAttr('checked');
    });
    $("#2way").click(function() {
       
        $(this).attr('checked','checked');
        $('#1way').removeAttr('checked');
    });

    $('.error-msg').hide();


    $(function () {
        $('#datestart').datetimepicker({
            altField: "#timestart",
            dateFormat: "dd/mm/yy",
            numberOfMonths: 2,
            minDate: 0
        });
        
        $("#dateend").datetimepicker({
            altField: "#timeend",
            hour: 00,
            minute: 00,
            dateFormat: "dd/mm/yy",
            numberOfMonths: 2,
            minDate: 0
        });
        
        var today = new Date();
        var day = today.getDate + 5;
        $("#datestart").datetimepicker('setDate', today );
        
        $("#dateend").datetimepicker('setDate', day);
        
    });

    function Search() {
        $('.error-msg').hide();
        var  timefrom = $('#timestart').val();
        var timeto = $('#timeend').val();
        var direction = $('#1way').attr('checked') == 'checked' ? 1 : 2;
        var from = $('#placestart').val();
        var to = $('#placeend').val();
        var datefrom = $('#datestart').val();
        var dateto = $('#dateend').val();
        //Test input
        if(from == null || from == ''){$('#err-msg-placestart').show(); return;}
        if(to == null || to == ''){$('#err-msg-placeend').show(); return;}
        // Ajax Post
        $.ajax({
            type: 'POST',
            url: '/Home/Search?timefrom='+timefrom+'&timeto='+timeto+'&direction='+direction+'&from='+from+'&to='+to+'&datefrom='+datefrom+'&dateto=' + dateto,
            before: $('#loadingImage').fadeIn("fast"),
            success: function(result) { 
                $('#result').html(result);
                //alert(result);
                $('#loadingImage').fadeOut("fast");           
            },
            complete: function() { $('#loadingImage').fadeOut("fast"); },
            //timeout: 1000
        });
    }
    
    $('#placestart').autocomplete({
        width: 300,
        delimiter: /(,|;)\s*/,
        lookup: 'Buôn Ma Thuột (BMV),Cà Mau (CAH),Côn Đảo (VCS),Cần Thơ (VCA),Huế (HUI),Hà Nội (HAN),Hải Phòng (HPH),Nha Trang (NHA),Phú Quốc (PQC),Pleiku (PXU),Quy Nhơn (UIH),Rạch Giá (VKG),Tam Kỳ (VCL),Tp Hồ Chí Minh (SGN),Tuy Hòa (TBB),Vinh (VII),Điện Biên (DIN),Đà Lạt (DLI),Đà Nẵng (DAD),Đồng Hới (VDH)'.split(',')
    });
    $('#placeend').autocomplete({
        width: 300,
        delimiter: /(,|;)\s*/,
        lookup: 'Buôn Ma Thuột (BMV),Cà Mau (CAH),Côn Đảo (VCS),Cần Thơ (VCA),Huế (HUI),Hà Nội (HAN),Hải Phòng (HPH),Nha Trang (NHA),Phú Quốc (PQC),Pleiku (PXU),Quy Nhơn (UIH),Rạch Giá (VKG),Tam Kỳ (VCL),Tp Hồ Chí Minh (SGN),Tuy Hòa (TBB),Vinh (VII),Điện Biên (DIN),Đà Lạt (DLI),Đà Nẵng (DAD),Đồng Hới (VDH)'.split(',')
    });
</script>
